<template>
    <a-row style="height: 100%;">
        <a-col :span="14" >
        
            <InsturmentCalendar />
        </a-col>
        <a-col :span="10">
            <a-row>
                <LineChart/>
            </a-row>
            <a-row>
                <div class="block-button">
                    <CoffeeOutlined /><br>
                    奖励兑换
                    <h6>点击进入奖励兑换界面</h6>
                </div>
                <div class="block-button">
                    <ContainerOutlined /><br>
                    日程安排
                    <h6>点击进入日程安排界面</h6>
                </div>
                
            </a-row>
            <a-row style="background-color: black; margin-top:10px; border-radius:5px;">
                <a-col :span="8">
                    <PieChart/>
                </a-col>
                <a-col :span="16"> 
                    <BarChart/>
                </a-col>
            </a-row>
           
           
        </a-col>
    </a-row>
</template>
<script setup lang="js">
import BarChart from '../components/BarChart.vue';
import InsturmentCalendar from '../components/calendar/InsturmentCalendar.vue';
import LineChart from '../components/LineChart.vue';
import PieChart from '../components/PieChart.vue';
</script>
<style scoped>
.block-button{
    width: 45%;
    background-color: rgb(95, 174, 92);
    margin-top:10px;
    margin-right:10px;
    margin-left:10px;
    margin-bottom:10px;
    border-radius:5px;
    height: 100px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}

</style>